<template>
  <el-dialog v-model="show" :show-close="false" title="预约出货" width="600px" @open="handleOpen">
    <div class="header">
      <div class="title">预约出货</div>
      <el-icon @click="show = false"><Close /></el-icon>
    </div>
    <div class="info">
      <div class="admin">{{ data?.user?.user_name || '未选择账号' }}</div>
      <div class="platform">{{ platformObj[data.bc_type]?.name || data.bc_type }}</div>
      <div class="vs">{{ data.pk_odds_key_ch }}</div>
    </div>
    <div class="form">
      <el-form
        ref="formRef"
        label-width="125px"
        :model="formData"
        :rules="rules"
        @submit.prevent="handleSubmit"
        @keyup.enter="handleSubmit"
      >
        <el-form-item
          label="优势盘出货："
          required
          :rules="[{ required: true, message: '优势盘出货不能为空', trigger: 'blur' }]"
          prop="is_ing_timer"
        >
          <el-radio-group v-model="formData.is_superior_place">
            <el-radio :value="1" style="margin-right: 8px">是</el-radio>
            <el-radio :value="0" style="margin-left: 40px">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- :rules="[{ required: true, message: '盘值不能为空', trigger: 'blur' }]" -->
        <el-form-item
          label="输入盘值："
          required
          prop="reservation_pk_ratio"
        >
          <template
            v-if="
              [
                '全场:主胜',
                '全场:客胜',
                '全场:平局',
                '半场:主胜',
                '半场:客胜',
                '半场:平局',

                '全场:角球:主胜',
                '全场:角球:客胜',
                '全场:角球:平局',

                '半场:角球:主胜',
                '半场:角球:客胜',
                '半场:角球:平局',
              ].includes(formData.pk_odds_key_ch)
            "
          >
            <el-input v-model="formData.pk_odds_key_ch" disabled />
          </template>
          <template v-else>
            <el-input-number v-model="formData.reservation_pk_ratio" controls-position="right" />
            <!-- <el-input v-model="formData.pk_ratio"/> -->
          </template>
        </el-form-item>

        <el-form-item label="输入赔率：" required>
          <el-form-item
            :rules="[{ required: true, message: '请填写', trigger: 'blur' }]"
            prop="min_odd"
            style="width: 50px"
          >
            <el-input v-model="formData.min_odd" placeholder="最低" />
          </el-form-item>

          <span style="margin: 0 8px">-</span>

          <el-form-item
            :rules="[{ required: true, message: '请填写', trigger: 'blur' }]"
            prop="max_odd"
            style="width: 50px"
          >
            <el-input v-model="formData.max_odd" placeholder="最高" />
          </el-form-item>
        </el-form-item>

        <el-form-item
          label="下单金额："
          required
          :rules="[{ required: true, message: '下单金额不能为空', trigger: 'blur' }]"
          prop="reservation_stake_type"
        >
          <el-radio-group v-model="formData.reservation_stake_type" style="width: 300px">
            <el-radio value="max">最大限额</el-radio>
            <el-radio value="min">最小限额</el-radio>
            <el-radio value="custom">自定义</el-radio>
            <template v-if="formData.reservation_stake_type == 'custom'">
              <el-form-item
                :rules="[{ required: true, message: '请填写', trigger: 'blur' }]"
                prop="reservation_stake"
                style="width: 100px"
              >
                <el-input-number v-model="formData.reservation_stake" controls-position="right" />
              </el-form-item>
            </template>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="赛前进场时间：" required>
          <el-form-item
            :rules="[{ required: true, message: '请填写', trigger: 'blur' }]"
            prop="before_timer_min"
            style="width: 50px"
          >
            <el-input v-model="formData.before_timer_min" placeholder="最低" />
          </el-form-item>

          <span style="margin: 0 8px">-</span>

          <el-form-item
            :rules="[{ required: true, message: '请填写', trigger: 'blur' }]"
            prop="before_timer_max"
            style="width: 50px"
          >
            <el-input v-model="formData.before_timer_max" placeholder="最高" />
          </el-form-item>
        </el-form-item>
        <el-form-item
          label="赛中是否进场："
          required
          :rules="[{ required: true, message: '赛中是否进场不能为空', trigger: 'blur' }]"
          prop="is_ing_timer"
        >
          <el-radio-group v-model="formData.is_ing_timer">
            <el-radio value="1" style="margin-right: 8px">是</el-radio>

            <template v-if="formData.is_ing_timer == 1">
              <el-form-item
                :rules="[{ required: true, message: '请填写', trigger: 'blur' }]"
                prop="ing_timer_min"
                style="width: 50px"
              >
                <el-input
                  v-model="formData.ing_timer_min"
                  placeholder="最低"
                  :disabled="formData.is_ing_timer != 1"
                />
              </el-form-item>

              <span style="margin: 0 8px; font-size: 14px">-</span>

              <el-form-item
                :rules="[{ required: true, message: '请填写', trigger: 'blur' }]"
                prop="ing_timer_max"
                style="width: 50px"
              >
                <el-input
                  v-model="formData.ing_timer_max"
                  placeholder="最高"
                  style="width: 50px"
                  :disabled="formData.is_ing_timer != 1"
                />
              </el-form-item>
            </template>

            <el-radio value="0" style="margin-left: 40px">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <template v-if="formData.reservation">
        <el-button @click="handleDelete">删除预约</el-button>
        <el-button type="primary" @click="handleSubmit">修改</el-button>
      </template>
      <template v-else>
        <el-button type="primary" class="hovepcvicecolor" @click="handleSubmit">保存</el-button>
      </template>
    </div>
  </el-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus'

const show = defineModel({ type: Boolean })

const props = defineProps({
  data: Object,
})

const { state, store } = inject('Sell')
const { platformObj } = inject('/board')

const formRef = ref()
const formData = ref({})

const rules = computed(() => {
  const arr = {
    desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
  }

  return arr
})

const handleSubmit = () => {
  const body = formData.value

  formRef.value.validate().then(val => {
    const body = {
      ...formData.value,
    }

    body.reservation = 1

    Object.assign(props.data, body)

    console.log('body', body)

    if (body.reservation_stake_type == 'custom') {
      props.data.stake = body.reservation_stake
    }

    if (
      ![
        '全场:主胜',
        '全场:客胜',
        '全场:平局',
        '半场:主胜',
        '半场:客胜',
        '半场:平局',

        '全场:角球:主胜',
        '全场:角球:客胜',
        '全场:角球:平局',

        '半场:角球:主胜',
        '半场:角球:客胜',
        '半场:角球:平局',
      ].includes(body.pk_odds_key_ch)
    ) {
      props.data.pk_odds_key_ch = body.pk_odds_key_ch.replace(
        /\d+(\.\d+)?/g,
        Math.abs(body.reservation_pk_ratio)
      )
      const keys = body.pk_odds_key.split(':')
      keys[keys.length - 2] = body.reservation_pk_ratio

      props.data.pk_odds_key = keys.join(':')
    }

    ElMessage.success('预约成功')

    show.value = false
  })
}

const handleDelete = () => {
  const body = {
    ...formData.value,
  }

  body.reservation = 0

  Object.assign(props.data, body)

  show.value = false
}

const handleOpen = () => {
  console.log(props.data)
  let ba = JSON.parse(JSON.stringify(props.data))

  // formData.value = { ...props.data }

  const disabled = [
    '全场:主胜',
    '全场:客胜',
    '全场:平局',
    '半场:主胜',
    '半场:客胜',
    '半场:平局',

    '全场:角球:主胜',
    '全场:角球:客胜',
    '全场:角球:平局',

    '半场:角球:主胜',
    '半场:角球:客胜',
    '半场:角球:平局',
  ].includes(ba.pk_odds_key_ch)
  
  
  let a = extractNumbers(ba.pk_odds_key_ch)
  
  let b = parseFloat(a)

  // if (disabled) formData.value.reservation_pk_ratio = formData.value.pk_odds_key_ch

  
  if (!disabled) {
    ba.reservation_pk_ratio = b
  }

  formData.value = ba
}

function extractNumbers(input) {
  // 正则表达式匹配数字，包括小数
  const regex = /-?\d+(\.\d+)?/g
  let a = input.match(regex) || []
  return a[0] // 返回匹配到的数字数组，如果没有匹配返回空数组
}
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  line-height: 40px;
  padding: 0 16px;
  .title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
  }

  .close {
    font-size: 16px;
    cursor: pointer;
  }
}

.info {
  padding: 16px;
  background-color: #d1eaff;
  text-align: center;
  .admin {
    font-size: 20px;
  }
  .platform {
    font-size: 12px;
    color: #778090;
  }
  .vs {
    margin-top: 4px;
    color: #252a30;
  }
}

.form {
  padding: 40px;
  margin: 0 auto;
  width: 512px;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 46px;
}
</style>
